import { PageContainer } from "@ant-design/pro-components";
import { Button, Card } from "antd";
import React from "react";
import { InfoCard } from "../../Welcome";
import useStyles from './index.style';



interface MyCardProps {
  id: number;
  name:string;
  backgroundColor:string;
}

const MyCard: React.FC<MyCardProps> = (props) => {

  const {id,name,backgroundColor} = props;
  const size = 60;
  const { styles } = useStyles({ size: size, color: props.backgroundColor });

  return (
    <div className={styles.myDiv} > {name}:{id} </div>
  );

};
const FarmList: React.FC = () => {

  const [color,setColor]=React.useState<string>("red");

  const toggleColor = () => {
    setColor(color === 'red' ? 'blue' : 'red');
  };

  return (
    <>
    <PageContainer>
      <Card>
        <Button type="primary" onClick={toggleColor}  >Primary Button111</Button>
        <MyCard id={0} name={"aaa"} backgroundColor={color}/>
        <InfoCard
              index={1}
              href="https://umijs.org/docs/introduce/introduce"
              title="了解 umi"
              desc="umi 是一个可扩展的企业级前端应用框架,umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。"
            />
      </Card>
    </PageContainer>
    
    </>
    );
}
export default  FarmList;